<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      svg {
        border: 1px solid red;
      }

      /* 十字 */
      #cross {
        transform-origin: 400px 300px;
        animation: rotate-ani 2s ease-out infinite;
      }

      /* 中心圆 */
      #mid-circle {
        transform-origin: 400px 300px;
        transform: scale(0) rotate(90deg);
        animation: rotation-occurs 2s ease-out infinite;
      }

      /* 中心圆左右两端三角形 */
      #left-top-triangle {
        transform-origin: 316px 216px;
      }
      #right-top-triangle {
        transform-origin: 484px 216px;
      }
      #left-top-triangle,
      #right-top-triangle {
        transform: scale(0);
        animation: extend 2s ease-out infinite;
      }
      #left-bottom-triangle {
        transform-origin: 316px 384px;
      }
      #right-bottom-triangle {
        transform-origin: 484px 384px;
      }
      #left-bottom-triangle,
      #right-bottom-triangle {
        transform: scale(0);
        animation: extend 2s ease-out infinite;
      }

      /* 中心圆上下两端小正方形 */
      #left-top-square {
        /* x = 400 - 42; y = 300 - 84 - 42 */
        transform-origin: 358px 174px;
      }
      #right-top-square {
        /* x = 400; y = 300 - 84 */
        transform-origin: 400px 216px;
      }
      #left-bottom-square {
        /* x = 400; y = 300 + 84 */
        transform-origin: 400px 384px;
      }
      #right-bottom-square {
        /* x = 400 + 42; y = 300 + 84 + 42 */
        transform-origin: 442px 426px;
      }
      #left-top-square,
      #right-top-square,
      #left-bottom-square,
      #right-bottom-square {
        opacity: 0;
        animation: extend 2s ease-out infinite,
          hide-to-appear 2s ease-out infinite;
      }

      /* 四周剪切小三角形 */
      #left-top-s-triangle {
        opacity: 0;
        transform: translate(-42px, -42px);
        animation: hide-to-appear 2s ease-out infinite,
          move-to-right-bottom 2s ease-out infinite;
      }
      #right-top-s-triangle {
        opacity: 0;
        transform: translate(42px, -42px);
        animation: hide-to-appear 2s ease-out infinite,
          move-to-left-bottom 2s ease-out infinite;
      }
      #left-bottom-s-triangle {
        opacity: 0;
        transform: translate(-42px, 42px);
        animation: hide-to-appear 2s ease-out infinite,
          move-to-right-top 2s ease-out infinite;
      }
      #right-bottom-s-triangle {
        opacity: 0;
        transform: translate(42px, 42px);
        animation: hide-to-appear 2s ease-out infinite,
          move-to-left-top 2s ease-out infinite;
      }

      /* 逆时针旋转 45° */
      @keyframes rotate-ani {
        25%,
        100% {
          transform: rotate(-45deg);
        }
      }

      /* 旋转变大出现 */
      @keyframes rotation-occurs {
        25% {
          transform: scale(0) rotate(90deg);
        }
        50%,
        100% {
          transform: scale(1);
        }
      }

      /* 伸展出现 */
      @keyframes extend {
        25% {
          transform: scale(0);
        }
        50%,
        100% {
          transform: scale(1);
        }
      }

      /* 隐藏到出现 */
      @keyframes hide-to-appear {
        25% {
          opacity: 0;
        }
        50%,
        100% {
          opacity: 1;
        }
      }

      /* 左上角往右下角移动 */
      @keyframes move-to-right-bottom {
        25% {
          transform: translate(-42px, -42px);
        }
        50%,
        100% {
          transform: translate(0, 0);
        }
      }

      /* 左上角往右下角移动 */
      @keyframes move-to-left-bottom {
        25% {
          transform: translate(42px, -42px);
        }
        50%,
        100% {
          transform: translate(0, 0);
        }
      }

      /* 左下角往右上角移动 */
      @keyframes move-to-right-top {
        25% {
          transform: translate(-42px, 42px);
        }
        50%,
        100% {
          transform: translate(0, 0);
        }
      }

      /* 左下角往右上角移动 */
      @keyframes move-to-left-top {
        25% {
          transform: translate(42px, 42px);
        }
        50%,
        100% {
          transform: translate(0, 0);
        }
      }
    </style>
  </head>
  <body>
    <svg id="ma-canvas" width="100%" height="600" viewBox="0 0 800 600">
      <defs>
        <!-- 定义蓝色正方形 -->
        <rect id="blueRect" width="42" height="42" fill="#26AAD6"></rect>
        <!-- 定义绿色正方形 -->
        <rect
          id="greenRect"
          width="34"
          height="34"
          fill="none"
          stroke-width="8"
          stroke="#51E88D"
        ></rect>

        <!-- 用于剪切的三角形 -->
        <!-- 左上 -->
        <clipPath id="cut-off-left-top">
          <polygon points="316 216, 358 216, 358 174" />
        </clipPath>
        <!-- 右上 -->
        <clipPath id="cut-off-right-top">
          <polygon points="442 216, 484 216, 442 174" />
        </clipPath>
        <!-- 左下 -->
        <clipPath id="cut-off-left-bottom">
          <polygon points="316 384, 358 384, 358 426" />
        </clipPath>
        <!-- 右下 -->
        <clipPath id="cut-off-right-bottom">
          <polygon points="442 384, 484 384, 442 426" />
        </clipPath>

        <!-- 四个角的蓝色圆 -->
        <circle id="blueCircle" r="20" fill="#26AAD6"></circle>
      </defs>

      <!-- 中间的圆 -->
      <g id="mid-circle">
        <!-- 紫色大半圆 -->
        <path d="M 400 384 A 84 84 0 1 0 400 216" fill="#8052E8"></path>
        <!-- 蓝色大半圆 -->
        <path d="M 400 384 A 84 84 0 1 1 400 216" fill="#26AAD6"></path>
        <!-- 紫色小半圆 -->
        <path d="M 400 328 A 28 28 0 1 1 400 272" fill="#8052E8"></path>
        <!-- 蓝色小半圆 -->
        <path d="M 400 328 A 28 28 0 1 0 400 272" fill="#26AAD6"></path>
      </g>

      <!-- 十字 -->
      <g id="cross" stroke-width="8" stroke="#FAB748">
        <!-- 横 -->
        <line x1="380" y1="300" x2="420" y2="300"></line>
        <!-- 竖 -->
        <line x1="400" y1="280" x2="400" y2="320"></line>
      </g>

      <!-- 三角形 -->
      <!-- 亮黄色 -->
      <g fill="#FFED5D">
        <!-- 左 -->
        <path id="left-top-triangle" d="M 316 300 l 0 -84 l -84 84 Z"></path>
        <!-- 右 -->
        <path id="right-bottom-triangle" d="M 484 300 l 0 84 l 84 -84 Z"></path>
      </g>
      <!-- 橘色 -->
      <g fill="#FAB748">
        <!-- 左 -->
        <path id="left-bottom-triangle" d="M 316 300 l 0 84 l -84 -84 Z"></path>
        <!-- 右 -->
        <path id="right-top-triangle" d="M 484 300 l 0 -84 l 84 84 Z"></path>
      </g>

      <!-- 显示正方形 -->
      <!-- 左上角蓝色 x = 400 - 42; y = 300 - 84 - 42  -->
      <use id="left-top-square" x="358" y="174" href="#blueRect"></use>
      <!-- 右上角绿色 x = 400 + 4; y = 300 - 84 - (42 - 4) -->
      <use id="right-top-square" x="404" y="178" href="#greenRect"></use>
      <!-- 左下角绿色 x = 400 - 42 + 4; y = 300 + 84 + 4 -->
      <use id="left-bottom-square" x="362" y="388" href="#greenRect"></use>
      <!-- 右下角蓝色 x = 400; y = 300 + 84 -->
      <use id="right-bottom-square" x="400" y="384" href="#blueRect"></use>

      <!-- 左上角剪切三角 -->
      <g
        id="left-top-s-triangle"
        clip-path="url(#cut-off-left-top)"
        fill="#FAB748"
      >
        <g transform="rotate(45, 337, 195)">
          <rect x="316" y="162" width="50" height="6"></rect>
          <rect x="316" y="174" width="50" height="6"></rect>
          <rect x="316" y="186" width="50" height="6"></rect>
          <rect x="316" y="198" width="50" height="6"></rect>
          <rect x="316" y="210" width="50" height="6"></rect>
          <rect x="316" y="222" width="50" height="6"></rect>
        </g>
      </g>

      <!-- 右上角剪切三角 -->
      <g
        id="right-top-s-triangle"
        clip-path="url(#cut-off-right-top)"
        fill="#26AAD6"
      >
        <g transform="rotate(-45, 463, 195)">
          <rect x="436" y="162" width="50" height="6"></rect>
          <rect x="436" y="174" width="50" height="6"></rect>
          <rect x="436" y="186" width="50" height="6"></rect>
          <rect x="436" y="198" width="50" height="6"></rect>
          <rect x="436" y="210" width="50" height="6"></rect>
          <rect x="436" y="222" width="50" height="6"></rect>
        </g>
      </g>

      <!-- 左下角剪切三角 -->
      <g
        id="left-bottom-s-triangle"
        clip-path="url(#cut-off-left-bottom)"
        fill="#26AAD6"
      >
        <g transform="rotate(-45, 337, 405)">
          <rect x="316" y="372" width="50" height="6"></rect>
          <rect x="316" y="384" width="50" height="6"></rect>
          <rect x="316" y="396" width="50" height="6"></rect>
          <rect x="316" y="408" width="50" height="6"></rect>
          <rect x="316" y="420" width="50" height="6"></rect>
          <rect x="316" y="432" width="50" height="6"></rect>
        </g>
      </g>

      <!-- 右下角剪切三角 -->
      <g
        id="right-bottom-s-triangle"
        clip-path="url(#cut-off-right-bottom)"
        fill="#FAB748"
      >
        <g transform="rotate(45, 463, 405)">
          <rect x="432" y="372" width="50" height="6"></rect>
          <rect x="432" y="384" width="50" height="6"></rect>
          <rect x="432" y="396" width="50" height="6"></rect>
          <rect x="432" y="408" width="50" height="6"></rect>
          <rect x="432" y="420" width="50" height="6"></rect>
          <rect x="432" y="432" width="50" height="6"></rect>
        </g>
      </g>

      <!-- 四周小圆 -->
      <!-- 左上 x = 400 - 84 - 84; y = 300 - 84 - 84 -->
      <use x="232" y="132" href="#blueCircle">
        <animate
          attributeName="x"
          values="316; 232; 232"
          keyTimes="0; 0.2; 1"
          dur="2s"
          repeatCount="indefinite"
          fill="freeze"
        ></animate>
        <animate
          attributeName="y"
          values="216; 132; 132"
          keyTimes="0; 0.2; 1"
          dur="2s"
          repeatCount="indefinite"
          fill="freeze"
        ></animate>
      </use>
      <!-- 左下 y = 300 + 84 + 84 -->
      <use x="232" y="468" href="#blueCircle">
        <animateTransform
          attributeName="transform"
          type="translate"
          values="84, -84; 0, 0; 0, 0"
          keyTimes="0; 0.2; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>
      <!-- 右上 x = 400 + 168 -->
      <use x="568" y="132" href="#blueCircle">
        <animateTransform
          attributeName="transform"
          type="translate"
          values="-84, 84; 0, 0; 0, 0"
          keyTimes="0; 0.2; 1"
          dur="2s"
          repeatCount="indefinite"
          fill="freeze"
        ></animateTransform>
      </use>
      <!-- 右下 -->
      <use x="568" y="468" href="#blueCircle">
        <animateTransform
          attributeName="transform"
          type="translate"
          values="-84, -84; 0, 0; 0, 0"
          keyTimes="0; 0.2; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animateTransform>
      </use>

      <!-- 图片 -->
      <image
        x="0"
        y="0"
        href=""
        width="40"
      >
        <animateMotion
          path="M 0 400, 50 340, 100 360, 150 300, 200 350, 230 300, 214 286"
          dur="2s"
          keyPoints="0; 0.5; 1; 1"
          keyTimes="0; 0.6; 0.8; 1"
          repeatCount="indefinite"
        ></animateMotion>
      </image>
      <image x="0" y="0" href="../imgs/juejin.png" width="40">
        <animateMotion
          path="M 800 300, 750 220, 700 360, 650 300, 600 350, 580 300, 544 286"
          dur="2s"
          keyPoints="0; 0.4; 1; 1"
          keyTimes="0; 0.3; 0.8; 1"
          repeatCount="indefinite"
        ></animateMotion>
      </image>

      <!-- 文字 -->
      <text id="signature" x="600" y="580" font-size="12" fill="#26AAD6">
        by:
        <tspan font-size="14">亦黑迷失</tspan>
      </text>
    </svg>

    <script src="../js/snap.svg-min.js"></script>
    <script>
      window.onload = function () {
        const svg = Snap('#ma-canvas')
        const signature = svg.select('#signature')

        const a = Snap.animate(
          [1000, 0],
          [600, 1],
          val => {
            signature.attr({
              x: val[0],
              opacity: val[1]
            })
          },
          2000,
          mina.easeout,
          () => {
            console.log('动画结束')
          }
        )
        console.log(a)
      }
    </script>
  </body>
</html>
